<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet"href="css/rest.css" />
		<link rel="stylesheet"href="css/tool.css" />
		<link rel="stylesheet"href="css/index.css"/> 
	</head>
	<body onselectstart="javascript:return false">
		<!--
        	作者：1466389822@qq.com
        	时间：2017-09-28
        	描述：导航栏
        -->
        <div>
		<header id='head'>
			<div class='head-center center'>
				<h1 class='head-logo fl'></h1>
				<div class='head-right fr'>
					<span class='head-right-q fr'></span>
					<span class='head-ding fr'></span>
					<span class='head-word fr'>客服</span>
					<span class='head-heard fl'></span>
				</div>
			</div>
		</header>
			<!--
            	作者：1466389822@qq.com
            	时间：2017-09-28
            	描述：主体
            -->
        <section id='section' class='over center clearfix'>
        		<!--
            	作者：1466389822@qq.com
            	时间：2017-09-28
            	描述：左侧
            -->
        	<div class='left fl'>
        		<h3 class='left-begine px13 cursor c-center'>开始</h3>
        		<ul class='left-nav'>
        			<li class='cursor clearfix' v-for='(index,val) in name'>
        				<img class='left-icon fl' :src='val.src'>
        				<span class='left-word px13 fl col-b8' @click='addclass(index)':class='{cols:index==off}'>{{val.name}}</span>
        			</li>
        		</ul>
        		<p class='left-ke px13'>签约客户</p>
        		<ul class='left-nav'>
        			<li class='line-li cursor clearfix'v-for='(index,val) in names'>
        				<img class='left-icon fl':src='val.src'>
        				<span class='left-words px13 fl col-b8' @click='adds(index)':class='{cols:index==two}'>{{val.name}}</span>
        			</li>
        		</ul>
        	</div>
        	<!--
            	作者：1466389822@qq.com
            	时间：2017-09-28
            	描述：右侧
            -->
            <div id='app'class='app fl'>
				<router-view></router-view>
			</div>
			<template id='all'>	
            <div class='right fl'>
            	<div class='right-nav clearfix'>
            		<a v-link = '{ path :"/all"}' href='#'class='px15 fl bor-a'>全部</a>
            		<a v-link = '{ path :"/wait"}' href='#'class='right-nav-a px15 fl'>等待付款</a>
            		<a v-link = '{ path :"/dong"}'href='#'class='right-nav-a px15 fl'>正在配音</a>
            		<a v-link = '{ path :"/finish"}' href='#'class='right-nav-a px15 fl'>已完成</a>
            		<a v-link = '{ path :"/talk"}' href='#'class='right-nav-a px15 fl'>待评价</a>
            		<p class='right-line'></p>
            		<div class='right-nav-sell fr cursor px15'@click='key(1)'>售后服务</div>
            	</div>
            	<div class='right-content'>
            		<div class='right-content-nav'>
            			<div class='right-l px14 fl'><a href='#'class='col-92'>订单内容</a></div>
            			<div class='right-le px14 fl'><a href='#'class='col-92'>配音类型</a></div>
            			<div class='right-m px14 fl'><a href='#'class='col-92'>支付状态</a></div>
            			<div class='right-me px14 fl'><a href='#'class='col-92'>配音状态</a></div>
            			<div class='right-r px14 fl'><a href='#'class='col-92'>操作</a></div>
            		</div>
	            		<ul class='right-item'>
	            			<li class='right-list clearfix'v-for='val in data.mail'>
	            				<div class='right-l px14 fl clearfix'>
	            					<img class='right-l-img fl' src='img/right-page.png'/>
	            					<p class='right-l-word col-68 fl with-212 px13'>{{val.text}}</p>
	            				</div>
		            			<div class='right-le px13 fl'>
		            				<p class='col-83 line-23'>急速配音</p>
		            				<p class='col-83 line-23'>>优质主播</p>
		            				<p class='col-83 line-23'>{{val.word}}</p>
		            			</div>
		            			<div class='right-m px13 fl'>
		            				<p class='col-83 line-23'>¥ {{val.money}}</p>
		            				<del class='col-bfbfbf line-23'>¥ {{val.del}}</del>
		            				<p class='col-bfbfbf line-23' v-if='val.type==1'>未付款</p>
		            			</div>
		            			<div class='right-me px13 fl'>
		            				<p class='col-83 line-23'>{{val.time}}</p>
		            				<p class='col-83 line-23'>{{val.ok}}</p>
		            			</div>
		            			<div class='right-r px13 fl'>
		            				<template v-if='val.type==1'>
		            					<div class='right-r px13 fl'>
				            				<div class='right-button px13 cursor '@click='pay(val.money)'>立即支付</div>
				            				<p class='col-68 line-23 height-23'></p>
				            				<p class='col-68 line-23 cursor c-center' @click='xiang(1)'>具体详情</p>
		            					</div>
		            				</template>
		            				<template v-if='val.type==2'>
		            					<div class='right-r px13 fl'>
				            				<div class='line-23 px13 col-bfbfbf cursor mar'>等待音频</div>
				            				<p class='col-68 line-23 height-23 c-center'></p>
				            				<p class='col-68 line-23 cursor c-center mar'@click='xiang(2)'>具体详情</p>
		            					</div>
		            				</template>
		            				<template v-if='val.type==3'>
		            					<div class='line-23 px13 wait-button cursor '>等待音频</div>
			            				<p class='col-68 line-23 height-23 c-center talk-button cursor'@click='talker'>评价</p>
			            				<p class='col-68 line-23 cursor c-center px13'@click='xiang(3)'>具体详情</p>
		            				</template>
		            				<template v-if='val.type==4'>
		            					<div class='right-r px13 fl'>
				            				<div class='line-23 px13 wait-button cursor '>等待音频</div>
				            				<p class='col-68 line-23 height-23 c-center talk-button cursor '@click='talker'>评价</p>
				            				<p class='col-68 line-23 cursor c-center px13'@click='xiang(4)'>具体详情</p>
				            			</div>
		            				</template>
		            			</div>
	            			</li>
	            			<li class='right-list clearfix'></li>
	            		</ul>
            	</div>
            </div>
            </template>
            <template id='wait'>
	            <div class='right fl'>
            	<div class='right-nav clearfix'>
            		<a v-link = '{ path :"/all"}' href='#'class='right-nav-a px15 fl'>全部</a>
            		<a v-link = '{ path :"/wait"}' href='#'class='bor-a px15 fl'>等待付款</a>
            		<a v-link = '{ path :"/dong"}'href='#'class='right-nav-a px15 fl'>正在配音</a>
            		<a v-link = '{ path :"/finish"}' href='#'class='right-nav-a px15 fl'>已完成</a>
            		<a v-link = '{ path :"/talk"}' href='#'class='right-nav-a px15 fl'>待评价</a>
            		<p class='right-line'></p>
            		<div class='right-nav-sell fr cursor px15'@click='key(1)'>售后服务</div>
            	</div>
            	<div class='right-content'>
            		<div class='right-content-nav'>
            			<div class='right-l px14 fl'><a href='#'class='col-92'>订单内容</a></div>
            			<div class='right-le px14 fl'><a href='#'class='col-92'>配音类型</a></div>
            			<div class='right-m px14 fl'><a href='#'class='col-92'>支付状态</a></div>
            			<div class='right-me px14 fl'><a href='#'class='col-92'>配音状态</a></div>
            			<div class='right-r px14 fl'><a href='#'class='col-92'>操作</a></div>
            		</div>
	            		<ul class='right-item'>
	            			<li class='right-list clearfix' v-for='val in Payment.mail'>
	            				<div class='right-l px14 fl clearfix'>
	            					<img class='right-l-img fl' src='img/right-page.png'/>
	            					<p class='right-l-word col-68 fl with-212 px13'>{{val.text}}</p>
	            				</div>
		            			<div class='right-le px13 fl'>
		            				<p class='col-83 line-23'>急速配音</p>
		            				<p class='col-83 line-23'>>优质主播</p>
		            				<p class='col-83 line-23'>{{val.word}}</p>
		            			</div>
		            			<div class='right-m px13 fl'>
		            				<p class='col-83 line-23'>¥ {{val.money}}</p>
		            				<del class='col-bfbfbf line-23'>¥ {{val.del}}</del>
		            				<p class='col-bfbfbf line-23'>未付款</p>
		            			</div>
		            			<div class='right-me px13 fl'>
		            				<p class='col-83 line-23'>{{val.time}}</p>
		            				<p class='col-83 line-23'>{{val.ok}}</p>
		            			</div>
		            			<div class='right-r px13 fl'>
		            				<div class='right-button px13 cursor'@click='pay(val.money)'>立即支付</div>
		            				<p class='col-68 line-23 height-23'></p>
		            				<p class='col-68 line-23 cursor c-center'@click='key(2)'>具体详情</p>
		            			</div>
	            			</li>
	            			<li class='right-list clearfix'></li>
	            		</ul>
            	</div>
            </div>
            </template>
            <template id='dong'>
	            <div class='right fl'>
            	<div class='right-nav clearfix'>
            		<a v-link = '{ path :"/all"}' href='#'class='right-nav-a px15 fl'>全部</a>
            		<a v-link = '{ path :"/wait"}' href='#'class='right-nav-a px15 fl'>等待付款</a>
            		<a v-link = '{ path :"/dong"}'href='#'class='bor-a px15 fl'>正在配音</a>
            		<a v-link = '{ path :"/finish"}'href='#'class='right-nav-a px15 fl'>已完成</a>
            		<a v-link = '{ path :"/talk"}'href='#'class='right-nav-a px15 fl'>待评价</a>
            		<p class='right-line'></p>
            		<div class='right-nav-sell fr cursor px15'@click='key(1)'>售后服务</div>
            	</div>
            	<div class='right-content'>
            		<div class='right-content-nav'>
            			<div class='right-l px14 fl'><a href='#'class='col-92'>订单内容</a></div>
            			<div class='right-le px14 fl'><a href='#'class='col-92'>配音类型</a></div>
            			<div class='right-m px14 fl'><a href='#'class='col-92'>支付状态</a></div>
            			<div class='right-me px14 fl'><a href='#'class='col-92'>配音状态</a></div>
            			<div class='right-r px14 fl'><a href='#'class='col-92'>操作</a></div>
            		</div>
	            		<ul class='right-item'>
	            			<li class='right-list clearfix' v-for='val in data.mail'>
	            				<div class='right-l px13 fl clearfix'>
	            					<img class='right-l-img fl' src='img/right-page.png'/>
	            					<p class='right-l-word col-68 fl with-212 px13'>{{val.text}}</p>
	            				</div>
		            			<div class='right-le px13 fl'>
		            				<p class='col-83 line-23'>急速配音</p>
		            				<p class='col-83 line-23'>>顶级主播</p>
		            				<p class='col-83 line-23'>{{val.word}}</p>
		            			</div>
		            			<div class='right-m px13 fl'>
		            				<p class='col-83 line-23'>¥ {{val.money}}</p>
		            				<del class='col-bfbfbf line-23'>¥ {{val.del}}</del>
		            			</div>
		            			<div class='right-me px13 fl'>
		            				<p class='col-83 line-23'>{{val.time}}</p>
		            				<p class='col-83 line-23'>{{val.ok}}</p>
		            				<p class='col-e8 line-23'>配音中</p>
		            			</div>
		            			<div class='right-r px13 fl'>
		            				<div class='line-23 px13 col-bfbfbf cursor mar'>等待音频</div>
		            				<p class='col-68 line-23 height-23 c-center'></p>
		            				<p class='col-68 line-23 cursor c-center mar'@click='key(3)'>具体详情</p>
		            			</div>
	            			</li>
	            			<li class='right-list clearfix'></li>
	            		</ul>
            	</div>
            </div>
            </template>
             <template id='finish'>
	            <div class='right fl'>
            	<div class='right-nav clearfix'>
            		<a v-link = '{ path :"/all"}' href='#'class='right-nav-a px15 fl'>全部</a>
            		<a v-link = '{ path :"/wait"}' href='#'class='right-nav-a px15 fl'>等待付款</a>
            		<a v-link = '{ path :"/dong"}'href='#'class='right-nav-a px15 fl'>正在配音</a>
            		<a v-link = '{ path :"/finish"}'href='#'class='bor-a px15 fl'>已完成</a>
            		<a v-link = '{ path :"/talk"}'href='#'class='right-nav-a px15 fl'>待评价</a>
            		<p class='right-line'></p>
            		<div class='right-nav-sell fr cursor px15'@click='key(1)'>售后服务</div>
            	</div>
            	<div class='right-content'>
            		<div class='right-content-nav'>
            			<div class='right-l px14 fl'><a href='#'class='col-92'>订单内容</a></div>
            			<div class='right-le px14 fl'><a href='#'class='col-92'>配音类型</a></div>
            			<div class='right-m px14 fl'><a href='#'class='col-92'>支付状态</a></div>
            			<div class='right-me px14 fl'><a href='#'class='col-92'>配音状态</a></div>
            			<div class='right-r px14 fl'><a href='#'class='col-92'>操作</a></div>
            		</div>
	            		<ul class='right-item'>
	            			<li class='right-list clearfix' v-for='val in data.mail'>
	            				<div class='right-l px13 fl clearfix'>
	            					<img class='right-l-img fl' src='img/right-page.png'/>
	            					<p class='right-l-word col-68 fl with-212 px13'>{{val.text}}</p>
	            				</div>
		            			<div class='right-le px13 fl'>
		            				<p class='col-83 line-23'>自选配音</p>
		            				<p class='col-83 line-23'>>优质主播</p>
		            				<p class='col-83 line-23'>{{val.word}}</p>
		            			</div>
		            			<div class='right-m px13 fl'>
		            				<p class='col-83 line-23'>¥ {{val.money}}</p>
		            				<del class='col-bfbfbf line-23'>¥ {{val.del}}</del>
		            			</div>
		            			<div class='right-me px13 fl'>
		            				<p class='col-83 line-23'>{{val.time}}</p>
		            				<p class='col-83 line-23'>{{val.ok}}</p>
		            			</div>
		            			<div class='right-r px13 fl'>
		            				<div class='line-23 px13 wait-button cursor '>等待音频</div>
		            				<p class='col-68 line-23 height-23 c-center talk-button cursor '@click='talker'>评价</p>
		            				<p class='col-68 line-23 cursor c-center px13'@click='key(4)'>具体详情</p>
		            			</div>
	            			</li>
	            			<li class='right-list clearfix'></li>
	            		</ul>
            	</div>
            </div>
            </template>
             <template id='talk'>
	            <div class='right fl'>
            	<div class='right-nav clearfix'>
            		<a v-link = '{ path :"/all"}' href='#'class='right-nav-a px15 fl'>全部</a>
            		<a v-link = '{ path :"/wait"}' href='#'class='right-nav-a px15 fl'>等待付款</a>
            		<a v-link = '{ path :"/dong"}'href='#'class='right-nav-a px15 fl'>正在配音</a>
            		<a v-link = '{ path :"/finish"}'href='#'class='right-nav-a px15 fl'>已完成</a>
            		<a v-link = '{ path :"/talk"}'href='#'class='bor-a px15 fl'>待评价</a>
            		<p class='right-line'></p>
            		<div class='right-nav-sell fr cursor px15'@click='key(1)'>售后服务</div>
            	</div>
            	<div class='right-content'>
            		<div class='right-content-nav'>
            			<div class='right-l px14 fl'><a href='#'class='col-92'>订单内容</a></div>
            			<div class='right-le px14 fl'><a href='#'class='col-92'>配音类型</a></div>
            			<div class='right-m px14 fl'><a href='#'class='col-92'>支付状态</a></div>
            			<div class='right-me px14 fl'><a href='#'class='col-92'>配音状态</a></div>
            			<div class='right-r px14 fl'><a href='#'class='col-92'>操作</a></div>
            		</div>
	            		<ul class='right-item'>
	            			<li class='right-list clearfix' v-for='val in data.mail'>
	            				<div class='right-l px13 fl clearfix'>
	            					<img class='right-l-img fl' src='img/right-page.png'/>
	            					<p class='right-l-word col-68 fl with-212 px13'>{{val.text}}</p>
	            				</div>
		            			<div class='right-le px13 fl'>
		            				<p class='col-83 line-23'>自选配音</p>
		            				<p class='col-83 line-23'>>优质主播</p>
		            				<p class='col-83 line-23'>{{val.word}}</p>
		            			</div>
		            			<div class='right-m px13 fl'>
		            				<p class='col-83 line-23'>¥ {{val.money}}</p>
		            				<del class='col-bfbfbf line-23'>¥ {{val.del}}</del>
		            			</div>
		            			<div class='right-me px13 fl'>
		            				<p class='col-83 line-23'>{{val.time}}</p>
		            				<p class='col-83 line-23'>{{val.ok}}</p>
		            			</div>
		            			<div class='right-r px13 fl'>
		            				<div class='line-23 px13 wait-button cursor '>等待音频</div>
		            				<p class='col-68 line-23 height-23 c-center talk-button cursor'@click='talker'>评价</p>
		            				<p class='col-68 line-23 cursor c-center px13'@click='key(5)'>具体详情</p>
		            			</div>
	            			</li>
	            			<li class='right-list clearfix'></li>
	            		</ul>
            	</div>
            </div>
            </template>
        </section>
        <script src='js/vue.js'></script>
        <script src='js/vue.min.js'></script>
        <script src="js/vue.router.min.js" ></script>
        <script src="js/jquery.min.js" ></script>
        <script src="layer-v3.1.0/layer/layer.js"></script>
        <script src='js/index.js'></script>
	</body>
</html>
